import React, {
  Component,
  createRef,
  createContext,
  useRef,
  useState,
  useEffect,
} from "react";
import PropType from "prop-types";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import gsap from "gsap"; //动画库
import Stats from "stats.js"; //性能监控
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js"; // FBX 模型加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; //模型加载器
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"; //模型解压缩

import "./Home.css";
import TagHook from "./components/tagHook";

import { CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer.js"; //// 引入CSS2模型对象CSS2DObject
import { CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer.js"; // 引入CSS2渲染器CSS2DRenderer


import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'; //EffectComposer 效果组合器 它是处理 WebGLRenderer 效果的 接收 renderer为参数
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'; // RenderPass 处理通道 它是处理 scene 场景和相机 camera 的。 接收 scene camera 为参数
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';//UnrealBloomPass 泛光通道
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js'; //添加抗锯齿的效果
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass'; // 高亮发光描边通道 OutlinePass(画布宽高二维向量，场景scene,相机camera)

import {SMAAPass} from 'three/examples/jsm/postprocessing/SMAAPass.js'; // SMAA抗锯齿通道

import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass';
import {GammaCorrectionShader} from 'three/examples/jsm/shaders/GammaCorrectionShader.js';// 伽马校正后处理Shader

const width = window.innerWidth; //屏幕宽度
const height = window.innerHeight; //屏幕高度

// 渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true, //开启优化锯齿
});
renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比。通常用于避免HiDPI设备上绘图模糊
renderer.setSize(width, height); // 将输出canvas的大小调整为(width, height)并考虑设备像素比，
renderer.outputEncoding = THREE.sRGBEncoding; //定义渲染器的输出编码
// 相机
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
camera.position.set(8, 5, 17);
camera.lookAt(0, 0, 0);
// 场景
const scene = new THREE.Scene();

// glb模型加载器
const loader = new GLTFLoader();

// 轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// controls.target.set(0, 12, 0);

// 性能监测 (这个不是three必须项)
const stats = new Stats(); // 性能监测



// 灯光
const directionalLight = new THREE.PointLight(0xffffff, 1, 100);
directionalLight.position.set(15,15,15);
scene.add(directionalLight);

const directionalLight1 = new THREE.PointLight(0xffffff, 1, 100);
directionalLight1.position.set(-15,-15,-15);
scene.add(directionalLight1);

const light = new THREE.AmbientLight(0x404040 ,0.5); //环境灯光
scene.add(light);

const ReactDemo = () => {
 
 

  useEffect(() => {
    animate();
    init();
  
  }, []);



  function init() {
  
   
    const container = document.createElement("div");
    document.body.appendChild(container);

 


    const axesHelper = new THREE.AxesHelper(90); // 辅助线
    scene.add(axesHelper);

    // 性能监测
    container.appendChild(stats.dom);

     // 建筑面材质
     let buildMaterial = new THREE.MeshBasicMaterial({ //一个以简单着色（平面或线框）方式来绘制几何体的材质。这种材质不受光照的影响。
      color: "#009EFF",     // 颜色
      transparent: true,    // 是否开启使用透明度
      opacity:0,        // 透明度
      depthWrite: false,    // 关闭深度写入 透视效果
      side: THREE.DoubleSide, // 双面显示
    });

    // 建筑线材质
    let lineMaterial = new THREE.LineBasicMaterial({ //一种用于绘制线框样式几何体的材质。
      color: "#36BCFF",
      transparent: true,
      opacity: 0.4,
      depthWrite: false,
      side: THREE.DoubleSide,
    });

    loader.load("./3D/吉利压壳模具加芯.glb", function (gltf) {
      scene.add(gltf.scene); //三维场景添加到model组对象中
      gltf.scene.traverse((e:any) => {              // 遍历模型中所有mesh
        e.material = buildMaterial;             // 赋模型材质
        if (e.geometry) {
          const edges = new THREE.EdgesGeometry( //这可以作为一个辅助对象来查看geometry的边缘。
              e.geometry
          );
          const line = new THREE.LineSegments( //在若干对的顶点之间绘制的一系列的线。 它和Line几乎是相同的，唯一的区别是它在渲染时使用的是gl.LINES， 而不是gl.LINE_STRIP。
              edges,
              lineMaterial                      // 赋线条材质
          );
          gltf.scene.add(line);                     // 把每一个mesh生成的线条添加到场景中
        }
      });
      // scene.add(object);  
     
     
    });

 

    container.appendChild(renderer.domElement);

    window.addEventListener("resize", onWindowResize);
    renderer.domElement.addEventListener("click", handleModelClick);
  }

  function onWindowResize() {
    camera.aspect = width / height;
    camera.updateProjectionMatrix();

    renderer.setSize(width, height);
  }

  function handleModelClick(event: MouseEvent) {
 
    const raycaster = new THREE.Raycaster();
    const pointer = new THREE.Vector2();
    pointer.x = (event.clientX / width) * 2 - 1;
    pointer.y = -(event.clientY / height) * 2 + 1;
    // 通过摄像机和鼠标位置更新射线
    raycaster.setFromCamera(pointer, camera);
 
   
    // 计算物体和射线的焦点
   const intersects:any = raycaster.intersectObjects(scene.children);

    console.log(intersects)
  }

  //

  function animate() {
    requestAnimationFrame(animate);
  
    renderer.render(scene, camera);
    controls.update();
  
    stats.update();
  }
  return (
    <div>
    </div>
  );
};

export default ReactDemo;
